<template>
	<view class="container">
		<!-- 登录卡片 -->
		<view class="login-card">
			<!-- 顶部装饰条 -->
			<view class="top-bar"></view>

			<!-- 登录内容 -->
			<view class="login-content">
				<!-- 标题区域 -->
				<view class="title-area">
					<view class="icon-container">
						<uni-icons type="scan" size="36" color="#165DFF"></uni-icons>
					</view>
					<view class="title">核销端登录</view>
					<view class="subtitle">请输入账号密码登录系统</view>
				</view>

				<!-- 登录表单 -->
				<form @submit="handleLogin" class="login-form">
					<!-- 账号输入 -->
					<view class="form-item">
						<view class="label">账号</view>
						<view class="input-wrapper">
							<uni-icons type="person" size="20" color="#86909C" class="input-icon"></uni-icons>
							<input type="text" v-model="username" placeholder="请输入账号" class="input" required />
						</view>
					</view>

					<!-- 密码输入 -->
					<view class="form-item">
						<view class="label">密码</view>
						<view class="input-wrapper">
							<!-- 修正密码图标类型 -->
							<uni-icons type="locked" size="20" color="#86909C" class="input-icon"></uni-icons>
							<input :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="请输入密码"
								class="input" required />
							<view class="toggle-btn" @click.stop="togglePassword" hover-class="toggle-btn-hover">
								<!-- 修正密码显示/隐藏图标类型 -->
								<uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20"
									color="#86909C"></uni-icons>
							</view>
						</view>
					</view>

					<!-- 登录按钮 -->
					<button form-type="submit" class="login-btn">
						登录
					</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		$get,
		$post,
	} from '@/utils/request';
	export default {
		data() {
			return {
				username: '',
				password: '',
				showPassword: false,
				rememberPassword: false
			};
		},
		onLoad() {
			// 确保图标组件正确加载
			console.log('uni-icons 是否可用:', typeof uniIcons !== 'undefined');
		},
		methods: {
			// 切换密码显示状态
			togglePassword() {
				document.activeElement.blur();
				this.showPassword = !this.showPassword;
				console.log('密码显示状态:', this.showPassword);
			},

			// 处理登录
			handleLogin(e) {
				if (!this.username) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				uni.showLoading({
					title: '登录中...'
				});

				setTimeout(() => {
					uni.hideLoading();
					$post("/sys/login", {
						username: this.username,
						password: this.password
					}).then(res => {
						if (res.code == 200) {

							uni.setStorageSync('authToken', res.result.token);
							uni.switchTab({
								url: "/pages/HomePage/HomePage"
							})
							uni.showToast({
								icon: 'success',
								title: "登录成功"
							})
						} else if (res.code) {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
				}, 1500);
			}
		}
	};
</script>

<style scoped>
	/* 保持原有样式不变 */
	.container {
		display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom, #e6f0ff, #ffffff);
		padding: 20rpx 0px;
		box-sizing: border-box;
		height: calc(100vh - 40rpx);
	}

	.login-card {
		margin: auto;
		background-color: #ffffff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
		width: 90%;
	}

	.top-bar {
		height: 6rpx;
		width: 100%;
		background: linear-gradient(to right, #165DFF, #36CFC9);
	}

	.login-content {
		padding: 60rpx 50rpx;
	}

	.title-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.icon-container {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: rgba(22, 93, 255, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #1D2129;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 24rpx;
		color: #86909C;
	}

	.login-form {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		margin: 20px 0px;
	}

	.label {
		font-size: 26rpx;
		color: #4E5969;
		font-weight: 500;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
	}

	.input {
		width: 100%;
		height: 80rpx;
		padding: 0 30rpx 0 80rpx;
		border: 2rpx solid #E5E6EB;
		border-radius: 16rpx;
		font-size: 26rpx;
		box-sizing: border-box;
	}

	.input:focus {
		border-color: #165DFF;
		box-shadow: 0 0 0 8rpx rgba(22, 93, 255, 0.1);
		outline: none;
	}

	.input-icon {
		position: absolute;
		left: 30rpx;
	}

	.toggle-btn {
		position: absolute;
		right: 30rpx;
		background: transparent;
		border: none;
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50rpx;
		height: 50rpx;
	}

	.toggle-btn-hover {
		background-color: rgba(0, 0, 0, 0.05);
		border-radius: 50%;
	}

	.login-btn {
		width: 100%;
		height: 90rpx;
		background-color: #165DFF;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 500;
		border-radius: 16rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		box-shadow: 0 6rpx 16rpx rgba(22, 93, 255, 0.2);
		transition: all 0.3s ease;
	}

	.login-btn:active {
		transform: translateY(4rpx);
		box-shadow: 0 2rpx 8rpx rgba(22, 93, 255, 0.2);
	}
</style>